<template>
  <div class="chanceWrap">

        <van-index-bar>
            <div v-for="(v,i) in carData" :key='i' >
                <h3><van-index-anchor :index='v.indexlist'></van-index-anchor></h3>
                <p v-for="(item,index) in v.children" :key='index' @click="toDetail(item)">
                    <img :src="item.url" alt="">
                    <span>{{item.name}}</span>
                </p>
                <van-cell :title="v.indexList" />
            </div>
            
        </van-index-bar>
  </div>
    

</template>
<script lang='ts'>
// import data from "../../../mock/cardata.json"
import { Component, Vue } from "vue-property-decorator";
import { State, Action ,Mutation} from "vuex-class";

@Component
export default class index extends Vue {
  // private data:any[]=data
    @State("carData") carData: any;
    @Action("getdata") getdata: any;
    @Mutation('SET_CARDATA') SET_CARDATA:any
    $router: any;
    created(){
        this.getdata()
    }
    toDetail(item){
        this.$router.push({path:'/detail',query:item})
    }

}
</script>

<style lang="scss" scoped>
    .chanceWrap{
        width: 100%;
        height: 100%;
        h3{
            background: #f5f5f5;
            padding: 0 20px;
        }
        p{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 5px 25px;
            border-bottom: 1px solid #f2f2f2;
            img{
                width: 30px;
                border-radius: 50%;
                margin-right: 20px;
            }
        }
    }
</style>